<template>
  <div>
   
    <div class="exBox">
      <div class="xdNavBox">
        <div class="xdListItem">
          <div
            class="xdListItemTopBox b-b-1"
            :class="{ xdListItemTopBoxImgFalgOn: v.xdImgArr.length }"
          >
            <div class="xdListItemTopHBox flex">
              <div class="xdListItemTopHImgBox flex">
                <img class="xdListItemTopHImg" :src="v.imgUrl" alt="" />
              </div>
              <div class="xdListItemTopHName flex">{{ v.name }}</div>
              <div class="xdListItemTopHTime flex">{{ v.time }}</div>
            </div>
            <p
              class="xdListItemTopP"
              :class="{ xdListItemTopPImgFalgOn: v.xdImgArr.length }"
            >
              {{ v.text }}
            </p>
            <div
              class="xdListItemTopPImgListBox flex"
              :class="{ xdListItemTopPImgListBoxOff: !v.xdImgArr.length }"
            >
              <div
                class="xdListItemTopPImgBox flex"
                v-for="(rv, rk) in v.xdImgArr"
                :key="rk + 'xdImgArr'"
              >
                <img class="xdListItemTopPImg" :src="rv" alt="" />
              </div>
            </div>
            <div class="xdFbTime">{{ v.xdFbTime }}</div>
            <div class="xdYSP"></div>
          </div>
          <div class="xdListItembtmBox flex">
            <div class="xdListItembtmImgBox xdListItembtmImg1Box flex">
              <img class="xdListItembtmImg xdListItembtmImg1" :src="v.zanImgUrl" alt="" />
              <span class="xdListItembtmText xdListItembtmText1">{{ v.zan }}</span>
            </div>
            <div class="xdListItembtmImgBox xdListItembtmImg2Box flex" @click="goInfo()">
              <img class="xdListItembtmImg xdListItembtmImg2" :src="v.plImgUrl" alt="" />
              <span class="xdListItembtmText xdListItembtmText2">{{ v.pl }}</span>
              <div class="xdListItembtmImgBoxFgL"></div>
              <div class="xdListItembtmImgBoxFgR"></div>
            </div>
            <div class="xdListItembtmImgBox xdListItembtmImg3Box flex">
              <img class="xdListItembtmImg xdListItembtmImg3" :src="v.zfImgUrl" alt="" />
              <span class="xdListItembtmText xdListItembtmText3">{{ v.zf }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Xindetow",
  data() {
    return {
      v: {
        imgUrl: require("../../assets/user/头像.png"),
        name: "昵称",
        time: "2017-06-28",
        text:
          "该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价",
        xdImgArr: [
          require("../../assets/user/chuncai.png"),
        ],
        zanImgUrl: require("../../assets/user/点赞.png"),
        zan: "1",
        plImgUrl: require("../../assets/user/评论.png"),
        pl: "10",
        zfImgUrl: require("../../assets/user/小分享.png"),
        zf: "26",
        xdFbTime: "8小时前",
      },
    };
  },
  components: {
    
  },
};
</script>

<style scoped>
* {
  font-size: 0;
}
.exBox {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spMsBox {
  margin: 0 2rem;
}
.f30c3 {
  font-size: 3rem;
  color: #333333;
}
.f30c4c {
  font-size: 3rem;
  color: #4c4c4c;
}
.hf30 {
  height: 3rem;
  line-height: 3rem;
}
.f24c4c {
  font-size: 2.4rem;
  color: #4c4c4c;
}
.b-b-1 {
  border-bottom: 0.1rem solid #cccccc;
}
</style>

<style scoped>
.xdListItemTopBox {
  height: 21.8rem;
  padding: 0 2rem;
  padding-top: 2rem;
}
.xdListItemTopBoxImgFalgOn {
  height: auto;
}
.xdListItemTopHBox {
  height: 8rem;
  margin-bottom: 1.4rem;
  justify-content: flex-start;
  position: relative;
}
.xdListItemTopHImgBox {
  width: 7.8rem;
  height: 7.8rem;
  margin-right: 1.5rem;
  border: 0.1rem solid #cdcdcd;
  border-radius: 50%;
}
.xdListItemTopHName {
  height: 100%;
  font-size: 2.8rem;
  color: #4c4c4c;
  justify-content: flex-start;
}
.xdListItemTopHTime {
  height: 100%;
  font-size: 2.4rem;
  color: #808080;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
}
.xdListItemTopP {
  height: 7.2rem;
  line-height: 3.6rem;
  font-size: 2.4rem;
  color: #cdcdcd;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.xdListItemTopPImgFalgOn {
  margin-bottom: 1.2rem;
}
.xdListItembtmBox {
  height: 8.1rem;
  padding: 0 2rem;
  border-bottom: 2rem solid #f2f2f2;
}
.xdListItembtmBox:nth-last-of-type(1) {
  border-bottom: none;
}
.xdListItembtmImgBox {
  width: calc(100% / 3);
  height: 100%;
  position: relative;
}
.xdListItembtmImg {
  margin-right: 2rem;
}
.xdListItembtmText {
  font-size: 2.4rem;
  color: #808080;
}
.xdListItembtmImgBoxFgL,
.xdListItembtmImgBoxFgR {
  width: 0.2rem;
  height: 4rem;
  background-color: #cccccc;
  position: absolute;
  top: 2rem;
}
.xdListItembtmImgBoxFgL {
  left: -0.1rem;
}
.xdListItembtmImgBoxFgR {
  right: -0.1rem;
}
.xdListItemTopPImgListBox {
  height: 20rem;
  margin-bottom: 2.2rem;
  justify-content: flex-start;
}
.xdListItemTopPImgListBoxOff {
  display: none;
}
.xdListItemTopPImgBox {
  width: 25.8rem;
  height: 19.8rem;
  border: 0.1rem solid #cccccc;
}
</style>

<style scoped>
.xdFbTime {
  height: 2.4rem;
  line-height: 2.4rem;
  font-size: 2.4rem;
  color: #808080;
  margin-bottom: 4.5rem;
}
</style>
